<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue/vuejs-2.5.16.js"></script>
				<script type="text/javascript" src="js/element/index.js"></script>
				<link rel="stylesheet" type="text/css" href="js/element/index.css"/>
				<script type="text/javascript" src="js/axios/axios-0.18.0.js"></script>
				<style>
				
				  .el-table .warning-row {
				    background: oldlace;
				  }
				
				  .el-table .success-row {
				    background: #f0f9eb;
				  }
				</style>
				
				<style>
				  .avatar-uploader .el-upload {
				    border: 1px dashed #d9d9d9;
				    border-radius: 6px;
				    cursor: pointer;
				    position: relative;
				    overflow: hidden;
				  }
				  .avatar-uploader .el-upload:hover {
				    border-color: #409EFF;
				  }
				  .avatar-uploader-icon {
				    font-size: 28px;
				    color: #8c939d;
				    width: 178px;
				    height: 178px;
				    line-height: 178px;
				    text-align: center;
				  }
				  .avatar {
				    width: 178px;
				    height: 178px;
				    display: block;
				  }
				</style>
				
	</head>
	
	<body>
		<div id="app">
			<!-- <button type="button" @click="huoqu()">获取数据</button> -->
			<el-form :inline="true" :model="productCound" class="demo-form-inline">
			  <el-form-item label="姓名">
			    <el-input v-model="productCound.name" placeholder="请输入姓名"></el-input>
			  </el-form-item>
			  
			  
			  <el-form-item label="商品类型">
			    <el-select v-model="productCound.typeid" placeholder="请选择类型">
				<el-option label="请选择" value=""></el-option>
			    <el-option label="日用百货" value="1"></el-option>
			    <el-option label="数码家电" value="2"></el-option>
			  	<el-option label="食品" value="3"></el-option>
			  	<el-option label="服装鞋袜" value="4"></el-option>
			    </el-select>
			  </el-form-item>
			  
			  <el-form-item label="商品状态">
			    <el-select v-model="productCound.state" placeholder="请选择类型">
			  	<el-option label="请选择" value=""></el-option>
			    <el-option label="在售" value="1"></el-option>
			  	<el-option label="下架" value="0"></el-option>
			    </el-select>
			  </el-form-item>
			 
			    </el-form-item>
				
			  <el-form-item>
			    <el-button type="primary" @click="onSubmit">查询</el-button>
				<el-button type="success" @click="chongzhi">重置</el-button>
				<el-button type="warning" @click="showDialog">添加商品</el-button>
				 <el-button type="danger"  @click="delBath">批量删除</el-button>
			  </el-form-item>
			</el-form>
			<hr/>
			
			  <el-table :data="products" style="width: 100%" :row-class-name="tableRowClassName"
			  stripe @selection-change="handleSelectionChange" ref="multipleTable">
				<el-table-column type="selection" width="55"></el-table-column>
				<el-table-column label="序号" type="index" :index="xuhao" width="80"> </el-table-column>
			    <el-table-column prop="name" label="商品名称" width="180"></el-table-column>
				 <el-table-column prop="state" label="商品状态" width="180" :formatter="stateFormate"></el-table-column>
			    <el-table-column prop="price"label="商品价格" width="180"></el-table-column>
			    <el-table-column prop="typeid" label="商品类型" width="180" :formatter="sfktFormate"></el-table-column>
				<el-table-column prop="pnum" label="库存" width="180"></el-table-column>
				<el-table-column prop="description"label="介绍" width="180"></el-table-column>
				<el-table-column prop="addTime" label="添加时间" :formatter="dateFormat2" width="180"></el-table-column>
				<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button @click="handleEdit(scope.row)"  type="primary" icon="el-icon-edit" circle></el-button>
					<el-button @click="handleDelete(scope.row)" type="danger" icon="el-icon-delete" circle></el-button>
				</template>
				</el-table-column>
			  </el-table>
			  
			   <el-pagination
			        @size-change="handleSizeChange"
			        @current-change="handleCurrentChange"
			        :current-page="page"
			        :page-sizes="[2, 5, 10, 15]"
			        :page-size="size"
			        layout="total, sizes, prev, pager, next, jumper"
			        :total="total">
			      </el-pagination>
				  <!-- 添加-->
				  <el-dialog :title="product.id==null ? '添加商品':'修改商品'" :visible.sync="dialogFormVisible">
				      <el-form :model="product" label-width="80px" :rules="rules">
				        <el-form-item label="商品名称" prop="name">
				          <el-input v-model="product.name"></el-input>
				        </el-form-item>
						
						<el-form-item label="商品状态">
						  <el-select v-model="product.state"  placeholder="请选择状态">
						    <el-option label="在售" :value="1"></el-option>
							<el-option label="下架" :value="0"></el-option>
						  </el-select>
						</el-form-item>
						
						<el-form-item label="商品价格">
						  <el-input v-model="product.price"></el-input>
						</el-form-item>
						
						<el-form-item label="库存">
						  <el-input v-model="product.pnum"></el-input>
						</el-form-item>
						
						<el-form-item label="商品图片">
							<el-upload
							  class="avatar-uploader"
							  action="http://localhost:8089/springboot02/file/upload"
							  :show-file-list="false"
							  :on-success="handleAvatarSuccess"
							  :before-upload="beforeAvatarUpload">
							  <img v-if="product.imgurl" :src="product.imgurl" class="avatar">
							  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
						</el-form-item>
						
						
				        <el-form-item label="商品类型">
				          <el-select v-model="product.typeid"  placeholder="请选择类型">
				            <el-option label="日用百货" :value="1"></el-option>
				            <el-option label="数码家电" :value="2"></el-option>
							<el-option label="食品" :value="3"></el-option>
							<el-option label="服装鞋袜" :value="4"></el-option>
				          </el-select>
				        </el-form-item>
						
						
						<el-form-item label="商品介绍">
						  <el-input type="textarea" v-model="product.description"></el-input>
						</el-form-item>
						
				     
				        <el-form-item>
				          <el-button type="primary" @click="addUser">{{product.id==null ? '添加':'修改'}}</el-button>
				          <el-button v-show="product.id==null" @click="chongzhiAdd">重置</el-button>
				        </el-form-item>
				      </el-form>
				  </el-dialog>
				  
				  
		</div>
	</body>

	<script type="text/javascript">
			new Vue({
				el:"#app",
				data:{
					rules: {
					          name: [
					            { required: true, message: '请输入活动名称', trigger: 'blur' },
					            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
					          ]
					      },
					products: [],
					page:1,
					size:10,
					total:0,
					dialogFormVisible:false,
					productCound:{},
					product:{
						imgurl:""
					},
					ids:[],
					isAdd:true
				},
				created(){
					this.huoqu();
				},
				methods:{
					 tableRowClassName({
						 row, rowIndex
						 }) {
					        if (rowIndex === 1) {
					          return 'warning-row';
					        } else if (rowIndex === 3) {
					          return 'success-row';
					        }
					        return '';
					      },
				async	huoqu(){
						var {data} = await axios.post(`http://localhost:8089/springboot02/products/findPageAndCount/${this.page}/${this.size}`,this.productCound);
						if(data.code == 2000){
							this.products = data.data.records;
							this.total = data.data.total;
						}
					},
					handleSizeChange(size){
						this.size = size;
						this.page =1;
						this.huoqu();
					},
					handleCurrentChange(current){
						this.page = current;
						this.huoqu();
					},
					onSubmit(){
						this.huoqu();
					},
					chongzhi(){
						this.productCound = {};
					},
					xuhao(index){
						return (this.page-1)*this.size+index+1;
					},
					showDialog(){
						this.chongzhiAdd();
						this.dialogFormVisible=true;
					},
				async	addUser(){
						var {data} = await axios.post(`http://localhost:8089/springboot02/products/products`,this.product);
						this.dialogFormVisible=false;
						if(data.code == 2000){
							this.page=1;
							this.huoqu();
						}
					},
					 chongzhiAdd(){
						this.product={
							imgurl:""
					 	}
					 },
					  async handleEdit(b){
					 	this.showDialog();
						this.isAdd = false;
						
					 	var {data} = await axios.get(`http://localhost:8089/springboot02/products/${b.id}`);
					 	  if(data.code == 2000){
					 		 this.product = data.data;
					 	}
					 },
					   handleDelete(b){
					     this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
					 		confirmButtonText: '确定',
					 		cancelButtonText: '取消',
					 		type: 'warning'
					 		}).then(() => {
					 		this.deleteUserById(b.id);
					 			})
					 		},
							
		           async	deleteUserById(id){
					 	var {data} = await axios.delete(`http://localhost:8089/springboot02/products/id/${id}`);
							if(data.code==2000){
								this.huoqu();
							}
					 	},
						async	delBath(){
								if(this.ids.length==0){
										this.$message("您没有选择任何商品");
							 		}else{
									 var {data} = await axios.post(`http://localhost:8089/springboot02/products/delBatch`,this.ids);	
									 if(data.code==2000){
										 this.huoqu();
									 }
									}
							 	},
						handleSelectionChange(){
								this.ids = [];
								var  arr = this.$refs.multipleTable.selection;
								for(var i = 0;i<arr.length;i++){
								    var product = arr[i];
								   this.ids.push(product.id);
								}
							 },
							 //上传图片
						handleAvatarSuccess(res, file) {
							 if(this.product.imgurl && this.isAdd){
							 	var data = new FormData();
							 			data.append("fileUrl",this.imgurl);
							 		var {data} =  axios.post(`http://localhost:8089/springboot02/file/delete`,data);	
							 	}
									this.isAdd = true;
							        this.product.imgurl = res.data;
							 },
						beforeAvatarUpload(file) {
							   const isJPG = file.type === 'image/jpeg';
							    const isLt2M = file.size / 1024 / 1024 < 2;
							 
							    if (!isJPG) {
							     this.$message.error('上传头像图片只能是 JPG 格式!');
							     }
							     if (!isLt2M) {
							     this.$message.error('上传头像图片大小不能超过 2MB!');
							     }
							      return isJPG && isLt2M;
							  },
							  sfktFormate(row,index){
							        if (row.typeid == 1) {
							          return "日用白货";
							        } else if(row.typeid == 2){
							          return "数码家电";
							        }
									else if(row.typeid == 3){
									  return "食品";
									}
									else if(row.typeid == 4){
									  return "服装鞋袜";
									}
							      },
								  stateFormate(row,index){
									 if (row.state == 1) {
									   return "在售";
									 } else if(row.state == 0){
									   return "下架";
									 } 
								  },
								  dateFormat2(row,column){
										var t=new Date(row.addTime);//row 表示一行数据, dateTime 表示要格式化的字段名称
										var year=t.getFullYear(),
										month=t.getMonth()+1,
										day=t.getDate(),
										hour=t.getHours()-8,
										min=t.getMinutes(),
										sec=t.getSeconds();
										var newTime=year+'-'+
										(month<10?'0'+month:month)+'-'+
										(day<10?'0'+day:day)+' '+
										(hour<10?'0'+hour:hour)+':'+
										(min<10?'0'+min:min)+':'+
										(sec<10?'0'+sec:sec);
										return newTime;
							}
								
				}
			})
	
	
	</script>
	
</html>
